<template>
  <div id="user">

  </div>
</template>

<script>
  import data from '../../../apiData/dashboard/user.js'
  export default {
    name: "user",
    data() {
      return {
        myChart: null,
        data: {}
      }
    },
    created() {
      this.data = data;
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    mounted() {
      window.onresize = () => (() => {
        this.drawChart();
      })();
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
          this.myChart.dispose();  // 销毁
        }
        this.myChart = this.$echarts.init(document.getElementById('user'));
        let option = {
          color: [ 'rgba(20, 149, 235, 0.4)' ],
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.xAxis
          },
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(102,102,102,0.2)'
                }
              }
            }
          ],
          series: [
            {
              name: '人数',
              data: this.data.series,
              type: 'line',
              smooth: true,
              showSymbol: false,
              areaStyle: {}
            }
          ]
        };
        option && this.myChart.setOption(option);
      }
    }
  }
</script>

<style scoped lang="scss">
  #user {
    width: 100%;
    height: 440px;
  }
</style>
